<template>
	<div class="hello">

		<div style="width: 100%;height: 61px;background: #e54847;color: #fff;line-height: 61px;font-size: 15px;text-align: center;margin-bottom: 40px;">
			猫眼电视
		</div>

		<div style="width: 100%;height: 115px;display: flex;margin-bottom: 30px;flex-wrap: wrap;" v-for="(i,$index) in ass">
			<img :src="i.img" style="width: 20%;height: 108px;" />
			<div style="width: 80%;height: auto;">

				<div style="width:90%;height: 32px;display: flex;">
					<span style="height: 32px;display: block;text-indent: 10px;padding:0 5px ;">
			{{i.nm}}
		</span>
					<span style="padding: 0px 0px;font-size: 12px;border:1px solid #3c9fe6;height: 18px;border-radius: 2px;width:30%;line-height: 19px;" v-if="i.version !=''">
						<span style="background: deepskyblue;color: #fff;padding-left: 5px;">{{i.version[0]}}</span>
			
			
			{{i.version[1]}}
		</span>
				</div>

				<span style="padding: 0 5px;height: 30px;line-height: 30px;font-size: 12px;display: block; text-indent: 10px;width:70%;">
			
			观众评分<i style="font-size: 14px;color:#fbbb26 ;">{{i.sc}}</i>
		</span>
				<span style="padding: 0 5px;height: 30px;line-height: 30px;font-size: 12px;display: block; text-indent: 5px;width:50%; overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;">
			
			主演：{{i.star}}
		</span>
				<span style="padding: 0 5px;height: 30px;line-height: 30px;font-size: 12px;display: block; text-indent: 10px;line-height: 30px;width:70%;">
			
			{{i.showInfo}}
		</span>
				<!--<button style="width: 54px;height: 30px;border: none;background: #f03d37;color: #fff;text-align: center;line-height: 30px;position: relative;top: -90px;left: 79%;color: #fff;" :class="i.globalReleased=true?'':'co'">
			购票
		</button>-->
				<div class="btn_one" :style="{display:i.globalReleased==true?'block':'none'}">购票</div>
				<div class="btn_two" :style="{display:i.globalReleased==false?'block':'none'}">预定</div>
			</div>
		</div>

		<!--路由页脚-->

	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				ass: '',
				wh: ''

			}
		},
		created() {
			var _this = this;
			_this.$http.post('http://booka1.myue.xzbiz.cn/dianying.php').then(function(res) {
				console.log(res)
				//				_this.ass = res.data.movieList
				var arr = [];
				for(var i = 0; i < res.data.movieList.length; i++) {
					var img = res.data.movieList[i].img;
					var sd = res.data.movieList[i].version;
					var nsd = sd.split(' ');
					var nn = [];
					for(var a = 0; a < nsd.length; a++) {
						nn.push(nsd[a]);
					}
					var aa = img.split('/w.h')
					var naa = aa[0] + aa[1];
					res.data.movieList[i].img = naa;
					res.data.movieList[i].version = nn;
					arr.push(res.data.movieList[i])
				}
				console.log(arr)
				_this.ass = arr
			});

		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	* {
		margin: 0;
		padding: 0;
		
		box-sizing: border-box;
	}
	
	a {
		color: #42b983;
	}
	
	.co {
		background: deepskyblue;
	}
	
	.btn_one {
		width: 54px;
		height: 30px;
		border: none;
		background: #f03d37;
		color: #fff;
		text-align: center;
		line-height: 30px;
		position: relative;
		top: -90px;
		left: 79%;
		color: #fff;
	}
	
	.btn_two {
		width: 54px;
		height: 30px;
		border: none;
		background: deepskyblue;
		color: #fff;
		text-align: center;
		line-height: 30px;
		position: relative;
		top: -90px;
		left: 79%;
		color: #fff;
	}
</style>